<template>
  <div class="investor-content">
    <!-- 投资价值展示 -->
    <section class="investment-hero">
      <div class="container">
        <div class="hero-content">
          <h1>智索真源 · 天使轮投资机会</h1>
          <p class="hero-subtitle">把握企业数字化转型机遇，构建万亿级任务撮合市场</p>
          <div class="investment-highlights">
            <div class="highlight-item">
              <span class="highlight-number">万亿级</span>
              <span class="highlight-label">市场空间</span>
            </div>
            <div class="highlight-item">
              <span class="highlight-number">AI+区块链</span>
              <span class="highlight-label">技术壁垒</span>
            </div>
            <div class="highlight-item">
              <span class="highlight-number">政府支持</span>
              <span class="highlight-label">政策红利</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 市场机遇 -->
    <section class="market-opportunity">
      <div class="container">
        <div class="section-header">
          <h2>市场机遇：外包产业正在被时代逼到十字路口</h2>
          <p>在过去十年里，中国的企业用工方式发生了巨大变化，灵活用工、项目制协作、远程团队已经成为常态</p>
        </div>
        
        <div class="opportunity-grid">
          <div class="opportunity-card">
            <div class="card-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>万亿级市场空间</h3>
            <p>企业数字化转型催生巨大任务外包需求，预计2035年市场规模将突破万亿</p>
            <ul>
              <li>灵活用工市场：预计到2025年规模将超1.2万亿元</li>
              <li>高校人才市场：在校生3000万，潜在劳动力超2亿工时</li>
              <li>政策趋势：国家正大力推进"产教融合""数字经济就业"</li>
            </ul>
          </div>
          
          <div class="opportunity-card">
            <div class="card-icon">
              <i class="fas fa-brain"></i>
            </div>
            <h3>技术壁垒优势</h3>
            <p>AI智能估值+股权激励的创新模式，形成独特技术壁垒和竞争优势</p>
            <ul>
              <li>AI算法自动分析历史项目数据与市场行情</li>
              <li>区块链确保整个过程的可信与不可篡改</li>
              <li>三维信用模型和实时风控系统</li>
            </ul>
          </div>
          
          <div class="opportunity-card">
            <div class="card-icon">
              <i class="fas fa-network-wired"></i>
            </div>
            <h3>网络效应显著</h3>
            <p>平台用户越多，匹配精度越高，形成强大的网络效应和用户粘性</p>
            <ul>
              <li>企业级客户付费能力强，客单价高</li>
              <li>平台盈利能力强劲，高毛利、可扩展</li>
              <li>复购率高，长期复用的智能基础设施</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 商业模式 -->
    <section class="business-model">
      <div class="container">
        <div class="section-header">
          <h2>商业模式：主要不靠抽成，靠系统价值</h2>
          <p>我们不是赚一次交易的佣金，而是在构建一套长期复用的智能基础设施</p>
        </div>
        
        <div class="revenue-streams">
          <div class="revenue-card">
            <h3>B端企业付费</h3>
            <p>企业按年订阅AI预算、智能风控与人才管理模块</p>
            <div class="revenue-details">
              <span class="revenue-label">年费制</span>
              <span class="revenue-amount">50万+</span>
            </div>
          </div>
          
          <div class="revenue-card">
            <h3>C端用户增值服务</h3>
            <p>学生购买"能力认证包""AI成长报告""职业规划服务"</p>
            <div class="revenue-details">
              <span class="revenue-label">订阅制</span>
              <span class="revenue-amount">3万+</span>
            </div>
          </div>
          
          <div class="revenue-card">
            <h3>数据生态授权</h3>
            <p>将平台沉淀的信用与技能数据，授权给招聘、教育、SaaS等生态伙伴</p>
            <div class="revenue-details">
              <span class="revenue-label">授权费</span>
              <span class="revenue-amount">100万+</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 融资计划 -->
    <section class="funding-plan">
      <div class="container">
        <div class="section-header">
          <h2>天使轮融资计划</h2>
          <p>目标金额：300万-500万元人民币</p>
        </div>
        
        <div class="funding-details">
          <div class="funding-item">
            <h3>资金用途</h3>
            <ul>
              <li><strong>产品升级：</strong>AI算法迭代与前后端平台优化</li>
              <li><strong>市场拓展：</strong>B端企业引入与高校渠道铺设</li>
              <li><strong>团队扩建：</strong>算法工程师、市场BD、运营人员配置</li>
            </ul>
          </div>
          
          <div class="funding-item">
            <h3>12个月目标</h3>
            <ul>
              <li>平台正式上线</li>
              <li>服务企业50+家、对接高校5所</li>
              <li>注册用户突破3万人</li>
              <li>实现首个百万级GMV</li>
            </ul>
          </div>
          
          <div class="funding-item">
            <h3>发展预期</h3>
            <ul>
              <li>两年内实现盈亏平衡</li>
              <li>三年内完成A轮融资</li>
              <li>形成百万活跃人才、万家企业的智能协作生态</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="team-section">
      <div class="container">
        <div class="section-header">
          <h2>团队：年轻，但有力量</h2>
          <p>智索真源的团队来自AI算法、教育创新与企业服务领域，既懂技术，也懂教育，更懂企业的痛点</p>
        </div>
        
        <div class="team-highlights">
          <div class="team-item">
            <i class="fas fa-users"></i>
            <h3>平均年龄25岁</h3>
            <p>年轻有活力的团队，充满创新精神</p>
          </div>
          
          <div class="team-item">
            <i class="fas fa-code"></i>
            <h3>技术实力</h3>
            <p>在AI产品落地与产业项目管理上有实战经验</p>
          </div>
          
          <div class="team-item">
            <i class="fas fa-heart"></i>
            <h3>一致信念</h3>
            <p>不是在做一个外包网站，而是在推动一场信任机制的革新</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'InvestorContent'
}
</script>

<style scoped>
.investor-content {
  color: white;
}

.investment-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.investment-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.investment-highlights {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.highlight-item {
  text-align: center;
}

.highlight-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 0.5rem;
}

.highlight-label {
  font-size: 1rem;
  opacity: 0.9;
}

.market-opportunity,
.business-model,
.funding-plan,
.team-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  position: relative;
  overflow: hidden;
}

.market-opportunity::before,
.business-model::before,
.funding-plan::before,
.team-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(139, 92, 246, 0.05) 100%);
  pointer-events: none;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.opportunity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.opportunity-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.opportunity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.card-icon i {
  font-size: 1.8rem;
  color: white;
}

.opportunity-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: white;
}

.opportunity-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.opportunity-card ul {
  list-style: none;
  padding: 0;
}

.opportunity-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.opportunity-card li:last-child {
  border-bottom: none;
}

.revenue-streams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.revenue-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  position: relative;
  z-index: 1;
}

.revenue-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.revenue-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.revenue-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.revenue-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.revenue-amount {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fbbf24;
}

.funding-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.funding-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.funding-item h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.funding-item ul {
  list-style: none;
  padding: 0;
}

.funding-item li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.funding-item li:last-child {
  border-bottom: none;
}

.team-highlights {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.team-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  transition: all 0.3s ease;
}

.team-item i {
  font-size: 2.5rem;
  color: #3b82f6;
  margin-bottom: 1rem;
}

.team-item h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.team-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.team-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .investment-highlights {
    gap: 2rem;
  }
  
  .highlight-number {
    font-size: 2rem;
  }
  
  .opportunity-grid,
  .revenue-streams,
  .funding-details {
    grid-template-columns: 1fr;
  }
  
  .team-highlights {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .team-item {
    max-width: 100%;
    min-width: auto;
    flex: none;
  }
}
</style>
